import { useState } from 'react'
import { Button, Input, Modal, Notification, Card } from '@/uiComponents'
import day from 'dayjs'

const UI = (argv: any) => {
    const [isModalVisible, setIsModalVisible] = useState(false)
    const onClick = (e: any, type: number) => {
        console.log('==========onClick==========')
        switch (type) {
            case 1:
                Notification.open({
                    message: `Notification Title [${day().format('YYYY-MM-DD HH:mm:ss')}]`,
                    description: `你取消了这个操作`,
                    onClick: () => {
                        console.log('Notification Clicked!')
                    }
                })
                break
            case 2:
                setIsModalVisible(true)
                break
            case 3:
                Modal.open({
                    title: 'Modal.open',
                    content: 'res',
                    onOk: () => {
                        console.log('Modal Open onOk')
                    },
                    onCancel: () => {
                        console.log('Modal Open onCancel')
                    }
                })
                break
            case 4:
                Modal.confirm({
                    title: 'Modal.confirm',
                    content: 'ssssssssss'
                })
                break
            case 5:
                Modal.info({
                    title: 'Modal.info',
                    content: 'ssssssssss'
                })
                break
            case 6:
                Modal.success({
                    title: 'Modal.success',
                    content: 'ssssssssss'
                })
                break
            case 7:
                Modal.error({
                    title: 'Modal.error',
                    content: 'ssssssssss'
                })
                break
            case 8:
                Modal.warning({
                    title: 'Modal.warning',
                    content: 'ssssssssss'
                })
                break
        }
    }

    const onChange = (e: any) => {
        console.log('==========onChange==========', e)
        console.log(e)
    }

    const onPressEnter = (e: any) => {
        console.log('==========onPressEnter==========', e)
        console.log(e)
    }

    const handleOk = (e: any) => {
        console.log('==========handleOk==========', e)
        setIsModalVisible(false)
    }

    const handleCancel = (e: any) => {
        console.log('==========handleCancel==========', e)
        setIsModalVisible(false)
    }

    return (
        <div>
            <div className='form-group'>
                <h2>Button</h2>
                <div className='row-space'>
                    <Button onClick={(e: any) => onClick(e, 1)}>Notification</Button>
                </div>
            </div>
            <div className='form-group'>
                <h2>Input</h2>
                <Input type='number' onChange={(e: any) => onChange(e)} onPressEnter={(e: any) => onPressEnter(e)} />
            </div>
            <div className='form-group'>
                <h2>Modal</h2>
                <div className='row-space'>
                    <Button onClick={(e: any) => onClick(e, 2)} type='primary'>
                        Modal
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 3)} type='primary'>
                        Modal.open
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 4)} type='primary'>
                        Modal.confirm
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 5)} type='primary'>
                        Modal.info
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 6)} type='primary'>
                        Modal.success
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 7)} type='primary'>
                        Modal.error
                    </Button>
                    <Button onClick={(e: any) => onClick(e, 8)} type='primary'>
                        Modal.warning
                    </Button>
                </div>
            </div>
            <Modal visible={isModalVisible} title='Modal Title' onOk={handleOk} onCancel={handleCancel}>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
            <div className='form-group'>
                <h2>Card</h2>
                <div className='row-space'>
                    <Card className='form-group' title='Default size card' extra={<a href='#'>More</a>}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                    <Card size='small' title='Small size card' style={{ width: 300 }}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </div>
            </div>
        </div>
    )
}

export default UI
